<template>
  <div class="app-container">
    <div>
      <loadings :loading="loading">
        <div>
          <el-row>
            <el-col>
              <el-card shadow="never">
                <!--基本配置-->
                <div>
                  <el-row>
                    <el-col>
                      <el-card shadow="never">
                        <el-row>
                          <el-col :span="22">
                            <div class="grid-content bg-purple">
                              <div>
                                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                         class="testCreate"
                                         size="mini">
                                  <el-form-item label="测试设备" prop="deviceId">
                  <span v-show="deviceShow" v-if="deviceList.length===0?deviceShow=true:deviceShow=false">{{
                      deviceMsg
                    }}</span>
                                    <el-button v-show="deviceShow" @click="refreshDevice">刷新设备</el-button>
                                    <el-radio-group v-model="ruleForm.deviceId">
                                      <el-radio v-for="(v,k) in deviceList"
                                                :key="k" :label="v">
                                        <el-button>{{ v }}</el-button>
                                      </el-radio>
                                    </el-radio-group>
                                  </el-form-item>
                                  <el-form :inline="true" label-width="100px" class="testCreate"
                                           size="mini" :model="ruleForm" :rules="rules" ref="ruleForm">
                                    <el-form-item label="产品名称" prop="productName">
                                      <el-select v-model="ruleForm.productName" placeholder="请选择产品名称"
                                                 style="width: 180px" size="mini">
                                        <el-option v-for="item in options" :key="item.id" :label="item.productName"
                                                   :value="item.productName"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="遍历模式" prop="agent">
                                      <el-select v-model="ruleForm.agent" placeholder="请选择遍历模式" style="width: 180px"
                                                 size="mini"
                                                 @change="onChange">
                                        <el-option label="robot" value="robot"></el-option>
                                      </el-select>
                                    </el-form-item>
                                    <el-form-item label="日志级别" prop="model">
                                      <el-select v-model="ruleForm.model" placeholder="请选择日志级别" style="width: 180px"
                                                 size="mini"
                                                 @change="onChange">
                                        <el-option label="简略模式" value="-v"></el-option>
                                        <el-option label="调试模式" value="-v -v"></el-option>
                                        <el-option label="完整日志模式" value="-v -v -v"></el-option>
                                      </el-select>
                                    </el-form-item>
                                  </el-form>
                                  <el-form :inline="true" label-width="100px" :model="ruleForm" :rules="rules"
                                           ref="ruleForm">
                                    <el-form-item label="测试名称" prop="testName">
                                      <el-input placeholder="请输入测试名称" v-model="ruleForm.testName" size="mini" :rows="1"
                                                style="width: 180px">
                                      </el-input>
                                    </el-form-item>
                                    <el-form-item label="事件频率" prop="throttle">
                                      <el-input placeholder="请输入遍历事件频率" v-model="ruleForm.throttle" size="mini"
                                                :rows="1"
                                                style="width: 180px" @change="onChange">
                                        <i slot="suffix" style="font-style:normal;margin-right: 10px;">毫秒</i>
                                      </el-input>
                                    </el-form-item>
                                    <el-form-item label="遍历时长" prop="runningMinute">
                                      <el-input placeholder="请输入遍历时长" v-model="ruleForm.runningMinute" size="mini"
                                                :rows="1"
                                                style="width: 180px" @change="onChange" required="true"
                                                message='请输入活动名称'
                                                trigger='blur'>
                                        <i slot="suffix" style="font-style:normal;margin-right: 10px;">分钟</i>
                                      </el-input>
                                    </el-form-item>
                                  </el-form>
                                  <el-form :inline="true" label-width="100px" :model="ruleForm" :rules="rules"
                                           ref="ruleForm">
                                    <el-form-item label="应用包名" prop="apkPackageName">
                                      <el-input placeholder="请输入应用包名" v-model="ruleForm.apkPackageName" size="mini"
                                                @change="onChange"
                                                style="width: 400px">
                                      </el-input>
                                    </el-form-item>
                                    <el-form-item label="输出目录" prop="filePath">
                                      <el-input placeholder="请输入目录" v-model="filePath" size="mini" @change="onChange"
                                                style="width: 400px">
                                      </el-input>
                                    </el-form-item>
                                  </el-form>
                                  <el-form-item label="数据收集">
                                    <el-checkbox-group v-model="ruleForm.typeList" @change="onChange" size="mini">
                                      <el-checkbox label="保存logcat" name="type" :disabled="true"></el-checkbox>
                                      <el-checkbox label="保存控制台输出" name="type" :disabled="true"></el-checkbox>
                                    </el-checkbox-group>
                                  </el-form-item>
                                  <el-form-item label="命令">
                                    <el-input v-model="ruleForm.command" type="textarea"
                                              :autosize="{ minRows: 2, maxRows: 4}" :disabled="true"
                                              size="mini"></el-input>
                                  </el-form-item>
                                  <el-form-item label="导入Jar文件">
                                    <el-checkbox-group v-model="ruleForm.jarPackageList" @change="onChange" size="mini">
                                      <el-checkbox label="monkeyq.jar" name="jarPackage" size="mini"
                                                   :disabled="true"></el-checkbox>
                                      <el-checkbox label="framework.jar" name="jarPackage" size="mini"
                                                   :disabled="true"></el-checkbox>
                                    </el-checkbox-group>
                                  </el-form-item>
                                </el-form>
                              </div>
                            </div>
                          </el-col>
                          <el-col :span="2">
                            <div class="grid-content bg-purple-light">
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <!--高级配置-->
                <div>
                  <el-row>
                    <el-col>
                      <el-card shadow="never">
                        <div style="margin-top:10px"></div>
                        <template>
                          <el-checkbox-group v-model="checkList">
                            <el-checkbox label="max.config"></el-checkbox>
                            <el-checkbox label="abl.strings"></el-checkbox>
                            <el-checkbox label="max.xpath.actions"></el-checkbox>
                            <el-checkbox label="max.schema"></el-checkbox>
                            <el-checkbox label="awl.strings"></el-checkbox>
                            <el-checkbox label="max.widget.black"></el-checkbox>
                            <el-checkbox label="max.tree.pruning"></el-checkbox>
                          </el-checkbox-group>
                        </template>
                        <div style="margin-top:10px"></div>
                        <el-form :inline="true" label-width="100px" :model="ruleForm" :rules="rules" ref="ruleForm">
                          <el-row>
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                <el-form-item label="max.config" prop="maxConfig" style="font-size:30px;" v-show="false">
                                  <el-button type="primary" plain @click='getMaxConfig' size="mini">加载示例</el-button>
                                  <span style="font-size:1px;"> 配置文件控制开关</span>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.maxConfig" type="textarea" :rows="10"
                                            autocomplete="off"></el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content bg-purple-light">
                                <el-form-item label="abl.strings" prop="ablStrings" v-show="false">
                                  <el-button type="primary" plain @click='getAblStrings' size="mini">加载示例</el-button>
                                  <span style="font-size:1px;"> 黑名单</span>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.ablStrings" type="textarea" :rows="10"
                                            autocomplete="off">
                                  </el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                          </el-row>
                          <el-divider></el-divider>
                          <el-row>
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                <el-form-item label="abl.strings" prop="ablStrings">
                                  <el-button type="primary" plain @click='getAblStrings' size="mini">加载示例</el-button>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.ablStrings" type="textarea" :rows="10"
                                            autocomplete="off">
                                  </el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content bg-purple-light">
                                <el-form-item label="abl.strings" prop="ablStrings">
                                  <el-button type="primary" plain @click='getAblStrings' size="mini">加载示例</el-button>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.ablStrings" type="textarea" :rows="10"
                                            autocomplete="off">
                                  </el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                          </el-row>
                          <el-divider></el-divider>
                          <el-row>
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                <el-form-item label="abl.strings" prop="ablStrings">
                                  <el-button type="primary" plain @click='getAblStrings' size="mini">加载示例</el-button>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.ablStrings" type="textarea" :rows="10"
                                            autocomplete="off">
                                  </el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content bg-purple-light">
                                <el-form-item label="abl.strings" prop="ablStrings">
                                  <el-button type="primary" plain @click='getAblStrings' size="mini">加载示例</el-button>
                                  <div style="margin-top:5px"></div>
                                  <el-input class='el-input-zt' v-model="ruleForm.ablStrings" type="textarea" :rows="10"
                                            autocomplete="off">
                                  </el-input>
                                </el-form-item>
                              </div>
                            </el-col>
                          </el-row>
                        </el-form>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <!--操作区-->
                <div style="margin-top:20px"></div>
                <!--功能操作栏-->
                <div class="bottom-side">
                  <el-row>
                    <el-button type="danger" plain size="mini" @click="goList">退出编辑</el-button>
                    <el-button type="success" plain @click='runTest("ruleForm")' size="mini">开始测试</el-button>
                    <el-button type="info" plain size="mini" @click="onSave()">保存测试设置</el-button>
                    <el-dialog
                      width="50%"
                      title="日志"
                      :visible.sync="centerDialogVisible"
                      :show-close="false"
                      center>
                  <span>
                    <div
                      class="main" ref="main"
                      style="height: 100px;
                      min-height: 50vh;
                      overflow: auto;
                      background: #333;
                      color: #aaa;
                      padding: 1px;
                      -webkit-text-fill-color: #13ce66">
                      <div>
                        <div ref="content" v-html="msg"></div>
                      </div>
                    </div>
                  </span>
                      <span slot="footer">
                    <el-button @click='closedDialog' size="mini">取 消</el-button>
                  </span>
                    </el-dialog>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </loadings>
    </div>
  </div>
</template>
<script>
import ELoading from "@/components/FastBot/ELoading";
import {socket} from '@/utils/socket'
// 引入vue-json-editor模块
import vueJsonEditor from 'vue-json-editor'

export default {
  data() {
    return {
      checkList: ['选中且禁用', '复选框 A'],
      loading: false,
      msg: '',
      centerDialogVisible: false,
      options: [],
      deviceShow: false,
      deviceMsg: '未检测到连接的设备',
      deviceList: [],
      filePath: '',
      ruleForm: {
        id: 0,
        deviceId: '',
        productName: '',
        testName: '遍历测试',
        apkPackageName: 'com.xes.jazhanghui.activity',
        ablStrings: '',
        maxConfig: '',
        model: '',
        agent: '',
        runningMinute: '1',
        throttle: '500',
        typeList: ['保存logcat', '保存控制台输出'],
        jarPackageList: ['monkeyq.jar', 'framework.jar'],
        command: ''
      },
      rules: {
        deviceId: [
          {required: true, message: '未连接设备', trigger: 'blur'}
        ],
        productName: [
          {required: true, message: '请选择产品名称', trigger: 'change'}
        ],
        agent: [
          {required: true, message: '请选择遍历模式', trigger: 'change'}
        ],
        model: [
          {required: true, message: '请选择日志级别', trigger: 'change'}
        ],
        testName: [
          {required: true, message: '请输入测试名称', trigger: 'blur'}
        ],
        throttle: [
          {required: true, message: '请输入遍历事件频率', trigger: 'blur'}
        ],
        apkPackageName: [
          {required: true, message: '请输入应用包名', trigger: 'blur'}
        ],
        ablStrings: [
          {required: true, message: '黑名单', trigger: 'blur'}
        ],
        maxConfig: [
          {required: true, message: '配置文件', trigger: 'blur'}
        ],
        runningMinute: [
          {required: true, message: '请输入遍历时长', trigger: 'blur'}
        ],
        command: [
          {required: true, message: '请输入执行命令', trigger: 'blur'}
        ]
      }
    }
  },
  components: {
    loadings: ELoading,
    vueJsonEditor
  },
  created() {
    this.init()
    this.onChange()
    this.refreshDevice()
    this.getProduct()
    this.getFilePath()
  },
  methods: {
    init() {
      const id = this.$route.params.id || 0
      if (id > 0) {
        this.loading = true
        this.get(`/api/fastbot/findOneById?id=${id}`, '', function (resp) {
          this.ruleForm.productName = resp.result.productName
          this.ruleForm.testName = resp.result.testName
          this.ruleForm.apkPackageName = resp.result.apkPackageName
          this.ruleForm.ablStrings = resp.result.ablStrings
          this.ruleForm.maxConfig = resp.result.maxConfig
          this.ruleForm.model = resp.result.model
          this.ruleForm.agent = resp.result.agent
          this.ruleForm.runningMinute = resp.result.runningMinute
          this.ruleForm.throttle = resp.result.throttle
          this.ruleForm.command = resp.result.command
          this.ruleForm.id = resp.result.id
          this.loading = false
        })
      }
      socket.init()
    },
    closedDialog() {
      socket.websock.close()
      console.log("socket状态: ", socket.websock.readyState)
      this.centerDialogVisible = false
      this.goRoute('/testmanage/list')
    },
    getFilePath() {
      this.get('http://localhost:8321/local/fastbot/getFilePath', '', function (resp) {
        this.filePath = resp.result
      })
    },
    getProduct() {
      this.get('/api/fastbot/getProduct', '', function (resp) {
        this.options = resp.result
      })
    },
    goList() {
      socket.websock.close()
      this.goRoute('/testmanage/list')
    },
    runTest(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.onSave()
          this.tip('开始测试', 'success')
          this.centerDialogVisible = true
          this.loading = true
          this.post('http://localhost:8321/local/fastbot/runTest', this.ruleForm, resp => {
            if (resp.code !== '200') {
              return
            }
            socket.sendMsg(this.ruleForm.deviceId, res => {
              this.msg = res.data
              this.loading = false
              this.$nextTick(() => {
                this.$refs.main.scrollTop = this.$refs.content.scrollHeight;
              })
            })
          })
        }
      })
    },
    onChange() {
      this.ruleForm.command = 'CLASSPATH=/sdcard/monkeyq.jar:/sdcard/framework.jar exec app_process /system/bin com.android.commands.monkey.Monkey -p ' + this.ruleForm.apkPackageName + '' +
        ' --agent ' + this.ruleForm.agent +
        ' --running-minutes ' + this.ruleForm.runningMinute +
        ' --throttle ' + this.ruleForm.throttle +
        ' ' + this.ruleForm.model
    },
    // 刷新设备
    refreshDevice() {
      this.get('http://localhost:8321/local/fastbot/getDeviceId', '', res => {
        if (res.code === '200' && res.result.length !== 0) {
          this.deviceList = res.result
        } else {
          this.tip('未获取到设备，请检测是否连接', 'error')
        }
      })
    },
    getAblStrings() {
      this.getFile('abl.strings', res => {
        this.ruleForm.ablStrings = res
      })
    },
    getMaxConfig() {
      this.getFile('max.config', res => {
        this.ruleForm.maxConfig = res
      })
    },
    onSave() {
      const opt = this.ruleForm.id ? 'update' : 'create'
      const uri = `/api/fastbot/${opt}`
      this.post(uri, this.ruleForm, resp => {
        if (opt === 'create') {
          console.log('保存成功')
          this.tip('保存成功', 'success')
          this.goList()
        } else {
          console.log('更新成功')
          this.tip('更新成功', 'success')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input-zt {
  width: 460px;
  -webkit-text-fill-color: #020722;
  font-size: 9px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
</style>
